﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/testStyle.css" rel="stylesheet" />
</head>
<body onkeydown="moveLR(event)">
    <div id="testStage">
        <div id="ball"></div>
        <div id="brick"></div>
    </div>

    <script>
        //bounce script

        var ball = document.getElementById("ball");
        ball.style.bottom = 0 + "px";
        ball.style.left = 375 + "px";
        var direction = 2;

        var brick = document.getElementById("brick");

        var startBouncing = function () {
            var justNumber = ball.style.bottom.substr(0, ball.style.bottom.length - 2);
            var bottom = parseInt(justNumber);
            bottom += direction;

            if (bottom >= 260) {
                direction *= -1;
            }
            else if (bottom <= 0) {
                direction *= -1;
            }

            var sign = -1;
            if (direction > 0) {
                sign = 1;
            }

            if (bottom > 230) {
                direction = 2 * sign;
            }
            else if (bottom < 30) {
                direction = 8 * sign;
            }
            else {
                direction = 6 * sign;
            }

            ball.style.bottom = bottom + "px";
        }

        setInterval(function () { startBouncing() }, 12);

        function moveLR(ev) {
            var pressedKey = ev.keyCode;
            var position;
            var direction;

            //alert(pressedKey);

            direction = ball.style.left;
            direction = direction.substr(0, direction.length - 2);
            position = parseInt(direction);

            if (pressedKey == 37) {
                if (position < -10) {
                    ball.style.left = 780 + "px";
                }
                else {
                    ball.style.left = (position - 10) + "px";
                }
            }
            else if (pressedKey == 39) {
                if (position > 760) {
                    ball.style.left = 0 + "px";
                }
                else {
                    ball.style.left = (position + 10) + "px";
                }
            }
        }

    </script>
</body>
</html>
